import { FC, PropsWithChildren, createContext, memo, useContext, useState } from "react";

interface ContextType {
    aaa: number;
    bbb: number;
    setAaa: (aaa: number) => void;
    setBbb: (bbb: number) => void;
}

const context = createContext<ContextType>({
    aaa: 0,
    bbb: 0,
    setAaa: () => { },
    setBbb: () => { }
});

const Provider: FC<PropsWithChildren> = ({ children }) => {
    const [aaa, setAaa] = useState(0);
    const [bbb, setBbb] = useState(0);

    return (
        <context.Provider
            value={{
                aaa,
                bbb,
                setAaa,
                setBbb
            }}
        >
            {children}
        </context.Provider>
    );
};

const TestContext = () => (
    <Provider>
        <Aaa />
        <Bbb />
    </Provider>
);

const Aaa = memo(() => {
    const { aaa, setAaa } = useContext(context);

    console.log('Aaa render...')

    return <div>
        aaa: {aaa}
        <button onClick={() => setAaa(aaa + 1)}>加一</button>
    </div>;
});

const Bbb = () => {
    const { bbb, setBbb } = useContext(context);

    console.log("Bbb render...");

    return <div>
        bbb: {bbb}
        <button onClick={() => setBbb(bbb + 1)}>加一</button>
    </div>;
};

export default TestContext;

